<template>
  <div class="app-container">
    <div class="filter-container">
      <stat-condition ref="condition" :stat-type="statType" @initChart="initChart"/>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import StatCondition from './components/StatCondition'

export default {
  name: 'StatSunburst',
  directives: { waves },
  components: { StatCondition },
  data() {
    return {
      statType: 'statSunburst'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initChart(myChart, resultData) {
      var option = {
        backgroundColor: '#2c343c',
        color: ['#333'],
        title: {
          text: this.$refs.condition.statCondition.platformName === '' ? '全平台-鹰眼调用统计报表' : (this.$refs.condition.statCondition.platformName + '-鹰眼调用统计报表'),
          subtext: '旭日图统计',
          textStyle: {
            fontSize: 14,
            align: 'center',
            color: '#fff'
          },
          subtextStyle: {
            align: 'center'
          }
        },
        toolbox: {
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: function(obj) {
            var okCount = obj.data.okCount
            var errorCount = obj.data.errorCount
            var errorRate = 0
            if (okCount > 0 && errorCount > 0) {
              errorRate = (errorCount / okCount * 100).toFixed(4)
            }
            var html = obj.data.name + '<br>'
            html += '成功:' + okCount + '次<br>'
            html += '失败:' + errorCount + '次<br>'
            html += '错误率:' + errorRate + '%<br>'
            return html
          }
        },
        series: {
          type: 'sunburst',
          highlightPolicy: 'descendant',
          data: resultData,
          radius: [0, '30%'],
          sort: null,
          levels: [{}, {
            r0: '5%',
            r: '30%',
            itemStyle: {
              borderWidth: 1
            },
            label: {
              fontSize: 14,
              rotate: 'tangential'
            }
          }, {
            r0: '30%',
            r: '65%',
            itemStyle: {
              borderWidth: 1
            },
            label: {
              fontSize: 16,
              rotate: 'radial'
              // align: 'right'
            }
          }, {
            r0: '65%',
            r: '80%',
            itemStyle: {
              borderWidth: 1
            },
            label: {
              position: 'outside',
              rotate: 'radial',
              distance: 15,
              fontSize: 14,
              // fontFamily:"Microsoft YaHei",
              textBorderColor: 'transparent',
              textShadowBlur: 0
            },
            itemStyle: {
              borderWidth: 3
            }
          }]
        }
      }
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>
<style>
</style>

